<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>BootsFaces: next-gen JSF Framework</title>
        <meta name="author" content="Riccardo Massera"></meta>
    </h:head>
    <h:body style="padding-top: 60px">
        <ui:composition template="/applayout/pageTemplate.xhtml">
            <ui:define name="content">
                <h1>Modals</h1>
                <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>

                <a id="trigger" class="btn btn-primary btn-lg" 
                   href="#amodal" data-toggle="modal">Click here for Modal</a>
                <b:modal id="amodal" title="Modal Example">
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <f:facet name="footer">
                        <b:button value="close" dismiss="modal" onclick="return false;"/>
                        <b:button value="Ok" look="primary" dismiss="modal" onclick="return false;"/>
                    </f:facet>
                </b:modal>

                <br/><br/>
                <strong>Markup:</strong><br/>

                <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
                    <![CDATA[
<b:modal id="amodal" title="Modal Example">
    <p>Modal body</p>
    <f:facet name="footer">
        <b:button value="close" dismiss="modal" onclick="return false;"/>
        <b:button value="Ok" look="primary" dismiss="modal" onclick="return false;"/>
    </f:facet>
</b:modal>

                    ]]></script>
                <script type="text/javascript">
                    SyntaxHighlighter.all();
                </script>
                <br/>
                <strong>Modal options</strong>
                <p>You can specify a Header with the <code>title</code> attribute. Modals have a dismiss button(a cross) in the upper right corner by default.</p>
                <p>The <code>&lt;b:modal&gt;</code> tag has also a facet with name <code>footer</code> where you can add buttons for dismissing the modal or for other actions.</p>
                <p>Notice that the <code>&lt;b:button&gt;</code> tag must have the <code>dismiss="modal"</code> attribute in order to dismiss the modal when clicked.</p>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
